<template>
	<view class="page-content-box">
		<view class="order-tab-content">
			<scroll-view scroll-y @scrolltolower="loadingMore" style="height: 100%;">
				<view class="more-order-content" style="padding-bottom: 20rpx;box-sizing: border-box;">
					<view v-if="order_list.length==0 && hasload" class="no-data-box">
						<image mode="aspectFit" src="../../static/wushuju.png"></image>
						<view>暂无物业报修记录~</view>
					</view>
					<block v-for="(item,index) in order_list" :key="index">
						<view class="order-list">
							<view class="order-title flex-block-row">
								<view class="flex-2 time">
									报修时间：{{item.createdate}}
								</view>
								<view :class="item.status=='已完成'?'status-done':'status-pending'">{{item.status}}</view>
							</view>
							<view class="order-content-box">
								<view class="flex-block-row" style="justify-content: space-between;padding-top: 20rpx;">
									<view class="text-left" style="flex: 1;padding-right: 20rpx;">
										<view class="all-cost-box">
											<view class="building-name" v-if="item.buildingName">{{item.buildingName}}</view>
											<view class="all-cost">{{item.place}}</view>
											<view class="num">{{item.remark}}</view>
										</view>
									</view>
									<view class="text-right">
										<view class="img-list">
											<image v-for="(imgId,idx) in item.imgIds.split(',')" :key="idx" :src="baseUrl + '/api/sys/file/download?attachId='+imgId+'&width=200'" mode="aspectFill" @tap="previewImage(item.imgIds, idx)"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
				<view v-if="ishide" class="loader" style="padding-top: 0;">
					<view class="loader-inner ball-pulse">
						<view></view>
						<view></view>
						<view></view>
					</view>
				</view>
				<view v-if="noMore" class="loading-more-text">暂无更多数据</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			order_list:[],
			baseUrl:this.$client.API_URL,
			ishide:false,
			noMore:false,
			hasload:false,
			pager:{
				page: 1,
				pageSize: 20,
				total: 0
			}
		}
	},
	onLoad() {
		this.pager.page = 1;
		this.order_list = [];
		uni.setNavigationBarColor({
			frontColor: '#000000',
			backgroundColor: '#70dbff'
		})
		this.getInitData();
	},
	methods: {
		getInitData(){
			var _this = this;
			this.noMore = false;
			if(_this.pager.page==1){
				_this.$loading();
			}else{
				_this.ishide = true;
			}
			var params = {
				pageNo: _this.pager.page,
				pageSize: _this.pager.pageSize
			};
			this.hasload = false;
			this.$client.get('/api/biz/property/maintenance/getListForCurrentUser', params, function(res,message,total,totalPages){
				_this.hasload = true;
				if(_this.pager.page==1){
					_this.$loading(false);
				}else{
					setTimeout(()=>{
						_this.ishide = false;
					},1000)
				}
				_this.order_list = _this.order_list.concat(res)
				_this.pager.page = totalPages;
				_this.pager.total = total;
			},function(res){
				_this.hasload = true;
				if(_this.pager.page==1){
					_this.$loading(false);
				}else{
					setTimeout(()=>{
						_this.ishide = false;
					},1000)
				}
			},true);
		},
		loadingMore(){
			if(this.order_list.length>=this.pager.total){
				this.noMore = true;
			}else{
				this.pager.page++;
				this.getInitData();
			}
		},
		previewImage(imgIds, idx){
			var urls = imgIds.split(',').map(id => this.baseUrl + '/api/sys/file/download?attachId=' + id);
			uni.previewImage({
				urls: urls,
				current: idx
			});
		}
	},
	onPullDownRefresh() {
		this.pager.page = 1;
		this.order_list = [];
		this.getInitData();
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	}
}
</script>

<style>
.order-tab-content{
	height: 100%;
}
.order-list{
	width: calc(100% - 40rpx);
	padding: 0 20rpx 20rpx 20rpx;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 10rpx;
	margin: 20rpx;
}
.order-list .order-title{
	height: 70rpx;
	border-bottom: 1rpx solid rgba(238,238,238,1);
}
.order-list .order-title view{
	font-size:28rpx;
	color:rgba(22,22,22,1);
	line-height: 56rpx;
}
.order-list .order-title .time{
	color:rgba(22,22,22,1);
	font-weight: bold;
}
.status-pending{
	font-weight:500;
	color:#FF6B00;
	background: #FFF5E6;
	padding: 4rpx 16rpx;
	border-radius: 8rpx;
}
.status-done{
	font-weight:500;
	color:#52C41A;
	background: #F6FFED;
	padding: 4rpx 16rpx;
	border-radius: 8rpx;
}
.order-list .order-content-box{
	justify-content: flex-start;
}
.all-cost-box{
	text-align: right;
	padding-top: 4rpx;
	padding-bottom: 20rpx;
}
.all-cost-box .num{
	padding-top: 20rpx;
	font-size:24rpx;
	color:#999;
	line-height: 30rpx;
	text-align: left;
}
.all-cost-box .building-name{
	font-size: 28rpx;
	color: #129de8;
	line-height: 40rpx;
	text-align: left;
	padding-bottom: 10rpx;
}
.all-cost-box .all-cost{
	font-size: 32rpx;
	font-weight: bold;
	line-height: 50rpx;
	text-align: left;
}
.img-list{
	display: flex;
	flex-wrap: wrap;
	gap: 10rpx;
	max-width: 260rpx;
}
.img-list image{
	width: 120rpx;
	height: 120rpx;
	border-radius: 10rpx;
}
</style>
